<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="1000px"  @open="handleDialogOpen()" v-loading="loading">
  <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
  <el-form :inline="true" class="demo-form-inline" ref="xlFrom" :model="vipdaTj" >
      <el-form-item label="身份证号" prop="idCard">
        <el-input placeholder="请输入关键字" v-model="likeidCard">
          <el-button slot="append" icon="el-icon-search" @click="getTbodyLists(likeidCard)"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="档案号" prop="fileNumber">
      <el-input v-model="vipdaTj.member.fileNumber" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
      <el-input v-model="vipdaTj.member.name" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
      <el-input v-model="vipdaTj.member.sex" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
      <el-input v-model="vipdaTj.member.age" :disabled="true"></el-input>
      </el-form-item>
   <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick()">
    <el-tab-pane label="强迫症" name="4">
      <h5>请根据近一年的感觉 回答以下问题</h5>
     <el-from  v-for="(item,index) in vipdaTj.tQuestionBank" :key="index">
      <span>{{item.name}}
      </span>
      <br>
        <el-radio v-model="model[index]" label="0">没有(根本不)</el-radio>
        <el-radio v-model="model[index]" label="1">很少(有一点)</el-radio>
        <el-radio v-model="model[index]" label="2">有时(有些)</el-radio>
        <el-radio v-model="model[index]" label="3">经常</el-radio>
        <el-radio v-model="model[index]" label="4">总是</el-radio>
      <br>
    </el-from>
    </el-tab-pane>
    <el-tab-pane label="焦虑症" name="5">
      <h5>请根据近一年的感觉 回答以下问题</h5>
      <el-from  v-for="(item,index) in vipdaTj.tQuestionBank" :key="index">
      <span>{{item.name}}</span><br>
        <el-radio v-model="model1[index]" label="0">没有(根本不)</el-radio>
        <el-radio v-model="model1[index]" label="1">很少(有一点)</el-radio>
        <el-radio v-model="model1[index]" label="2">有时(有些)</el-radio>
        <el-radio v-model="model1[index]" label="3">经常</el-radio>
        <el-radio v-model="model1[index]" label="4">总是</el-radio><br>
      </el-from>

    </el-tab-pane>
    <el-tab-pane label="恐惧症" name="6">
      <h5>请根据近一年的感觉 回答以下问题</h5>
      <el-from  v-for="(item,index) in vipdaTj.tQuestionBank" :key="index">
      <span>{{item.name}}</span><br>
       <el-radio v-model="model2[index]" label="0">没有(根本不)</el-radio>
        <el-radio v-model="model2[index]" label="1">很少(有一点)</el-radio>
        <el-radio v-model="model2[index]" label="2">有时(有些)</el-radio>
        <el-radio v-model="model2[index]" label="3">经常</el-radio>
        <el-radio v-model="model2[index]" label="4">总是</el-radio><br>
      </el-from>
    </el-tab-pane>
  </el-tabs>
</el-form>
  <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small"  @click="submitForm('xlFrom')">确 定</el-button>
    </span>
</el-dialog>
</template>

<script>
import {queryByidsCard,queryByTquestionId,xlcpAdd} from '@/api/xinliceping_tj'
export default {
  name: 'xlcp-edit',
  data() {
    return {
      loading: false,
      activeName: '4',
      dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
      vipdaTj:{
        member:{

          },
        tQuestionnaire:{

        },
        tQuestionBank:{

        },

        },
        likeidCard:"",
        model:[],
        model1:[],
        model2:[]
     }
  },
  methods: {
    submitForm(xlFrom) {
      this.$refs[xlFrom].validate(valid => {
        if (valid) {
          if(this.dialogProps.action === 'add') {
            this.doSaveTz()
          } else {
            // this.doUpdateTz()
          }
        } else {
          return false
        }
      });
    },
    getTbodyLists(likeidCard){
        queryByidsCard(likeidCard).then(response=>{
            this.vipdaTj.member=response.data.member
          })
    },
    doSaveTz() {
      this.loading = true
       let sum = 0;
       for(let i = 0; i < this.model.length; ++i) {
        sum+= Number(this.model[i]);
        }
      let sum1 = 0;
       for(let i = 0; i < this.model1.length; ++i) {
        sum1+= Number(this.model1[i]);
        }
      let sum2 = 0;
       for(let i = 0; i < this.model2.length; ++i) {
        sum2+= Number(this.model2[i]);
      }
      xlcpAdd(sum,sum1,sum2,this.vipdaTj.member.id)
      .then(response => {
        this.loading = false
        this.dialogProps.visible = false
        this.$emit('save-finished')
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    async  handleClick() {
       queryByTquestionId(this.activeName)
       .then(response => {
        this.vipdaTj.tQuestionBank=response.data
        // for(var i=0;i<response.data.length;i++){
        //   this.radio.name="radio"+i
        //     this.model.push(this.radio)
        //     alert(this.model[i].name)
        // }
       })
       .catch(error => {
         console.log(error)
       })
      },
    handleDialogClose() {
      this.dialogProps.visible = false
    },
    handleDialogOpen() {
      this.$nextTick(() => {
        // this.$refs[''].clearValidate()
      })
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })
    }
  },
  created() {
    this.handleClick();
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openaddDialog', function() {
        this.dialogProps.action = 'add'
        this.dialogProps.title = '添加'
        this.dialogProps.visible = true
      })
      this.$on('openeditDialog', function() {
        this.dialogProps.action = 'edit'
        this.dialogProps.title = '修改'
        this.roleModel = {
          locked: false
        }
        this.dialogProps.visible = true
      })
    })
  }
}
</script>




